// 年度开工项目统计
(function (param) {
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart1"));
  // var myChart = echarts.init(document.getElementsByClassName("chart1"));
  //    2.指定配置项和数据
  var option = {
    color: ["lightblue", "green"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: 0,
      top: 0,
      textStyle: {
        color: "rgba(255, 255, 255, .5)",
      },
    },
    grid: {
      left: "0%",
      top: "40",
      right: "0%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        // prettier-ignore
        data: ['2018', '2019', '2020', '2021', '2022'],
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12",
        },
        // x轴样式不显示
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "项目数",
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12",
        },
        // y轴样式显示
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.9)",
            // width: 1,
            // type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)",
          },
        },
      },
    ],
    series: [
      {
        name: "政府项目",
        type: "bar",
        data: [0, 3, 30, 53, 4],
        barWidth: "35%",
        itemStyle: {
          barBorderRadius: 5,
        },
      },
      {
        name: "非政府项目",
        type: "bar",
        data: [4, 4, 31, 90, 6],
        barWidth: "35%",
        itemStyle: {
          barBorderRadius: 5,
        },
      },
    ],
  };
  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 智慧工地区域统计
(function (param) {
  // 声明颜色数组
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart2"));

  // var myChart = echarts.init(document.getElementsByClassName("chart2"));
  //    2.指定配置项和数据
  var option = {
    tooltip: {
      show: false,
    },
    grid: {
      top: "5%",
      left: "15%",
      bottom: "5%",
    },
    // 不显示X轴信息
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        type: "category",
        data: ["亭湖区", "开发区", "盐都区", "盐南高新区", "阜宁县"],
        // 不显示Y轴的线
        axisLine: {
          show: false,
        },
        // 不显示Y轴的刻度
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        inverse: true,
      },
      {
        show: true,
        data: ["28个项目", "25个项目", "24个项目", "24个项目", "21个项目"],
        // 不显示y轴的线
        axisLine: {
          show: false,
        },
        // 不显示刻度
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            fontSize: 9,
            color: "#fff",
          },
        },
        inverse: true,
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        data: [100, 89, 86, 86, 75],
        yAxisIndex: 0,
        // 柱子之间的宽度
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 20,
        // 柱子设为圆角
        itemStyle: {
          barBorderRadius: 15,
        },
        // 显示柱子内的信息
        label: {
          show: true,
          position: "inside",
          // {c}会自动解析为data里面的数据
          formatter: "{c}%",
          fontSize: 10,
        },
        color: function (params) {
          // params是柱子对象，dataIndex是当前柱子索引号
          return myColor[params.dataIndex];
        },
      },
      {
        name: "框",
        type: "bar",
        data: [100, 100, 100, 100, 100],
        yAxisIndex: 1,
        // 柱子之间的宽度
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 17,
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15,
        },
      },
    ],
  };

  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 项目新增终止情况
(function (param) {
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart3"));
  // var myChart = echarts.init(document.getElementsByClassName("chart1"));
  //    2.指定配置项和数据
  var option = {
    //设置两条折线的颜色
    color: ["#00f2f1", "#ed3f35"],
    legend: {
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
      right: "10%", // 距离右边10%
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true, // 包含刻度文字在内
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff", // 文本颜色
      },
      data: [
        "亭湖区",
        "",
        "",
        "响水县",
        "",
        "",
        "射阳县",
        "",
        "",
        "盐南高新区",
        "",
        "",
      ],
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 去除刻度
      },
      axisLabel: {
        color: "#fff", // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    series: [
      {
        name: "区新增数",
        data: [0, 2, 0, 0, 1, 3, 0, 0, 2, 0, 0, 1],
        type: "line",
        areaStyle: {},
      },
      {
        name: "区终止数",
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        type: "line",
        areaStyle: {},
      },
    ],
  };

  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 全市扬尘曲线图
(function (param) {
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart5"));
  // var myChart = echarts.init(document.getElementsByClassName("chart1"));
  //    2.指定配置项和数据
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: "#4c9bfd",
      },
      // 这个10% 必须加引号
      right: "10%",
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true, // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        show: false, // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    series: [
      {
        name: "扬尘",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      },
      {
        name: "PM2.5",
        type: "line",
        smooth: true,
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
    ],
  };

  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 起重机械设备情况
(function (param) {
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart7"));
  // var myChart = echarts.init(document.getElementsByClassName("chart1"));
  //    2.指定配置项和数据
  var option = {
    backgroundColor: "rgba(39,46,74,.3)",
    tooltip: {
      trigger: "item",
    },

    grid: {
      left: "0%",
      top: "40",
      right: "0%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        data: ["塔式起重机", "施工起重机", "物料起重机", "其他"],
        axisLabel: {
          textStyle: {
            color: "rgba(122,173,212,1)",
            fontSize: 14,
          },
          margin: 30, //刻度标签与轴线之间的距离。
        },

        axisLine: {
          show: true, //不显示x轴
          lineStyle: {
            color: "rgba(53,65,95,1)",
          },
        },
        axisTick: {
          show: true, //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "单位：（台）",
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(53,65,95,1)",
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.9)",
            // width: 1,
            // type: "solid"
          },
        },
        axisTick: {
          show: true,
        },

        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: 14,
        },
      },
    ],
    series: [
      {
        label: {
          show: true,
        },
        //柱底圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [43, 20], //调整截面形状
        symbolOffset: [0, 10],
        z: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0,171,255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,171,255,1)",
                },
              ],
              false
            ),
          },
        },
        data: ["1080", "13012", "900", "10345"],
      },

      //柱体
      {
        name: "",
        type: "bar",
        barWidth: 43,
        itemStyle: {
          // shadowOffsetX: 200,
          // shadowOffsetY: 200,
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  //第一节下面
                  offset: 0,
                  color: "rgba(0,213,255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,171,255,1)",
                },
              ],
            },
          },
        },
        data: ["1080", "13012", "900", "10345"],
      },

      //柱顶圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [43, 21], //调整截面形状
        symbolOffset: [0, -10],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0,143,223,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,143,223,1)",
                },
              ],
              false
            ),
          },
        },
        data: ["1080", "13012", "900", "10345"],
      },
    ],
  };
  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 智慧工地设备统计
(function (param) {
  //    1.实例化对象
  var myChart = echarts.init(document.querySelector(".chart6"));
  // var myChart = echarts.init(document.getElementsByClassName("chart1"));
  //    2.指定配置项和数据
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "设备占比",
        type: "pie",
        radius: [20, 150],
        center: ["50%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          fontSize: 15,
        },
        data: [
          { value: 949, name: "视频设备" },
          { value: 772, name: "其他设备" },
          { value: 353, name: "塔机" },
          { value: 291, name: "扬尘设备" },
          { value: 185, name: "车辆未冲洗设备" },
          { value: 72, name: "升降机" },
          { value: 36, name: "卸料台" },
        ],
      },
    ],
  };
  //   3.把配置项给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
